<template>
    <div class="Customize_head">
        <div class="top">
            <span class="title-text" >{{title}}</span>
        </div>
        <div class="top-bottom">
            <div class="date">
                {{ nowDate }} {{ dayOfWeek }}
                    <img src="../../assets/img/xuxian.png" style="width: 27vw;float: left;margin-top: 0.5vh;" />
            </div>
            <div class="time">
                {{ nowTime }}
                <img src="../../assets/img/xuxian.png" style="width: 27vw;float: right;margin-top: 0.5vh;" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
      title: String
  },
    data: function () {
        return {
            nowDate:"",
            nowTime: "",
            dayOfWeek: "",
        }
  },
    mounted() {
        this.getCurrentTime();
        let myTimeDisplay = setInterval(() => {
            this.getCurrentTime(); //每秒更新一次时间
        }, 1000);

        let today = new Date();
        let weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        this.dayOfWeek = weekDays[today.getDay()];
    },
    methods: {
        getCurrentTime() {
            //获取当前时间并打印
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
            let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
            _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
            this.nowTime =hh + ':' + mf + ':' + ss;
            this.nowDate=yy + '-' + mm + '-' + dd;
        },
    },
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.Customize_head {
    height: 100%;
    width: 100%;
    padding-top: 10px;


}
.top {
    position: relative;
    background-image: url("../../assets/img/top.png");
    height: 50px;
    width: 100%;
    text-align: center;
    background-size: 100% 100%;

}

.top-bottom {
    top: 20px;
    position: absolute;
    height: 3%;
    width: 100%;

}

.date {
    height: 100%;
    width: 13%;
    float: left;
    font-size: 25px;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: 1vw;
}

.time{
    height: 100%;
    width: 13%;
    float: right;
    font-size: 25px; 
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: right;
    padding-right: 1vw;
    
}
.box2 {
    clear: both;
    float: right;
    width: 27%;
    height: 30px;
    margin-right: 2%;
    margin-top: -60px;
    background-color: #111010;
    text-align: center;
    
}

.link {
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

a {
    text-decoration: none;
}

.router-link-active {
    text-decoration: none;
}

.title-text {
    float: left;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 6px;
    width: 100%;
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}</style>
